<template>
    <div class="page-container">
        <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
        <div class="scale-container">
            <!-- 顶部标题 -->
            <div class="headTitle">被动安全领域数字沙盘</div>
            <div class="headButton" @click="backHome"></div>
            <div class="left1" @click="goToService('newEnergy')"></div>
            <div class="right1" @click="goToService('certification')"></div>
            <!-- 左边内容 -->
            <div class="left">
                <div class="box">
                    <div class="headImg"></div>
                    <div class="title">被动安全领域</div>
                    <div class="content">
                        <div class="title">实车碰撞</div>
                        <div class="contentTitle">
                            <span style="top: 50px;
    position: absolute;
    width: 23px;
    height: 23px;
    background: #49B8FF;
    border-radius: 5px;"></span>
                            <p><span style="margin-left: 40px;float: right;">跑道长度140m、牵引速度可达90km/h；1套减速滑台；完备的假人及假人标定能力，完备的碰撞设备设施；一流的测试团队+支持保
                                    障团队（车辆换件、修复、工装加工制作等）；</span></p>
                            <p><span style="top: 172px;
    position: absolute;
    width: 23px;
    height: 23px;
    background: #49B8FF;
    border-radius: 5px;"></span><span
                                    style="margin-left: 40px;">能力范围：提供碰撞类法规、ACU标定、NCAP摸底、气囊匹配、eCall、出口认证、定制化测试等服务。</span>
                            </p>
                            <p><span style="top: 230px;
    position: absolute;
    width: 23px;
    height: 23px;
    background: #49B8FF;
    border-radius: 5px;"></span><span
                                    style="margin-left: 40px;float: right;">测试能力涵盖：国标GB、欧标ECE/EC/EEC、美标FMVSS、韩标KMVSS、海湾GSO、南非SANS/SABS、欧洲汽车联盟RCAR等国内
                                    外多种测试标准。
                                </span></p>
                        </div>
                    </div>
                </div>
                <div class="box2">
                    <!-- 遍历碰撞类型数据，动态生成每个content1 -->
                    <div class="content1" :style="index === 1
                        ? {
                            gap: '50px',
                        }
                        : {
                        }" v-for="(item, index) in collisionList" :key="index">
                        <!-- 标题 -->
                        <div class="title">{{ item.title }}</div>
                        <!-- 描述文本 -->
                        <div class="title2" :style="index === 0
                            ? {
                                top: '-30px',
                            }
                            : {
                                top: '-60px',
                            }">{{ item.title2 }}</div>
                        <!-- 动态渲染标准列表（多列） -->
                        <div class="standards-list">
                            <!-- 遍历列数据 -->
                            <div class="standards-col" v-for="(col, colIndex) in item.standards" :key="colIndex">
                                <!-- 遍历列中的每个标准项 -->
                                <div class="standard-item" v-for="(standard, stdIndex) in col" :key="stdIndex">
                                    <!-- 第一列第一项显示“相关标准：”+箭头 -->
                                    <template v-if="colIndex === 0 && stdIndex === 0">
                                        <span style="font-family: '微软雅黑粗体';">{{ standard }}</span>
                                        <div class="img1"></div> <!-- 箭头图标 -->
                                    </template>
                                    <!-- 其他标准项直接显示文本 -->
                                    <template v-else>
                                        {{ standard }}
                                    </template>
                                </div>
                            </div>
                        </div>
                        <!-- 动态渲染图片区域 -->
                        <div class="title3">
                            <div class="img1" v-for="(img, imgIndex) in item.images" :key="imgIndex"
                                :style="{ backgroundImage: `url(${img.src})` }" :title="img.alt">
                            </div>
                        </div>
                    </div>
                    <div class="content2">
                        <div class="content2-1" :style="getBgColor(index)" v-for="(item, index) in collisionList2"
                            :key="index">
                            <!-- 标题 -->
                            <div class="title">{{ item.title }}</div>
                            <!-- 描述文本 -->
                            <div class="title2" :style="index === 1
                                ? {
                                    textAlign: 'left',
                                }
                                : {
                                }" v-html="item.description"></div>
                            <!-- 动态渲染标准列表（多列） -->
                            <div class="standards-list" :style="index === 0
                                ? {
                                    top: '-10px',
                                }
                                : {
                                    left: '-170px',
                                    top: '-30px',
                                }">
                                <!-- 遍历列数据 -->
                                <div class="standards-col" v-for="(col, colIndex) in item.standards" :key="colIndex">
                                    <!-- 遍历列中的每个标准项 -->
                                    <div class="standard-item" v-for="(standard, stdIndex) in col" :key="stdIndex">
                                        <!-- 第一列第一项显示“相关标准：”+箭头 -->
                                        <template v-if="colIndex === 0 && stdIndex === 0">
                                            <span style="font-family: '微软雅黑粗体';">{{ standard }}</span>
                                            <div class="img1"></div> <!-- 箭头图标 -->
                                        </template>
                                        <!-- 其他标准项直接显示文本 -->
                                        <template v-else>
                                            {{ standard }}
                                        </template>
                                    </div>
                                </div>
                            </div>
                            <!-- 动态渲染图片区域 -->
                            <div class="title3">
                                <div class="img1" :style="index === 1
                                    ? {
                                        backgroundImage: `url(${img.src})`,
                                    }
                                    : {
                                        width: '445px',
                                        backgroundImage: `url(${img.src})`,
                                    }" v-for="(img, imgIndex) in item.images" :key="imgIndex" :title="img.alt">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中间内容 -->
            <div class="middle">
                <div class="box">
                    <div class="headImg"></div>
                    <div class="title">被动安全领域</div>
                    <div class="content">
                        <div class="contentTitle">
                            <p><span style="font-family: '微软雅黑粗体';color: #59ceff;">标准化服务：</span><span
                                    style="margin-left: 40px;">牵头制定</span><span
                                    style="font-family: '微软雅黑粗体';color: #59ceff;">《商用车辆正面安全气囊系统技术规范》国家标准</span></p>
                            <p><span style="font-family: '微软雅黑粗体';color: #59ceff;">服务行业：</span><span
                                    style="margin-left: 40px;">深刻理解国内外客户和市场，以客户产品安全和质量提升需求为导向，提供</span><span
                                    style="font-family: '微软雅黑粗体';color: #59ceff;">实车碰撞、滑台碰撞、车身及附件性能、安全部件</span>等被动安全领域全过程、一站式的专业技术服务。
                            </p>
                        </div>
                    </div>
                </div>
                <div class="box2">
                    <div class="title">滑台碰撞</div>
                    <div class="title2">
                        <span style="top: 55px;
    position: absolute;
    width: 23px;
    height: 23px;
    background: #49B8FF;
    border-radius: 5px;"></span>
                        <p><span style="margin-left: 40px;float: right;">滑台碰撞试验包括：汽车座椅强度试验、行李箱冲击试验、客车座椅强度、校车座椅强度、内部凸出物试验、门锁耐惯性力性能试验、气瓶
                                安装强度、行李架动态冲击、手机支架动态冲击、带AEB制动的乘员保护试验等。</span></p>
                    </div>
                </div>
                <div class="box3">
                    <!-- 遍历碰撞类型数据，动态生成每个content1 -->
                    <div class="content1" v-for="(item, index) in middleBlocks" :key="index">
                        <!-- 标题 -->
                        <div class="title">{{ item.title }}</div>
                        <!-- 描述文本 -->
                        <div class="title2" v-html="item.description"></div>
                        <!-- 动态渲染标准列表（多列） -->
                        <div class="standards-list">
                            <!-- 遍历列数据 -->
                            <div class="standards-col" v-for="(col, colIndex) in item.standards" :key="colIndex">
                                <!-- 遍历列中的每个标准项 -->
                                <div class="standard-item" v-for="(standard, stdIndex) in col" :key="stdIndex">
                                    <!-- 第一列第一项显示“相关标准：”+箭头 -->
                                    <template v-if="colIndex === 0 && stdIndex === 0">
                                        <span style="font-family: '微软雅黑粗体';">{{ standard }}</span>
                                        <div class="img1"></div> <!-- 箭头图标 -->
                                    </template>
                                    <!-- 其他标准项直接显示文本 -->
                                    <template v-else>
                                        {{ standard }}
                                    </template>
                                </div>
                            </div>
                        </div>
                        <!-- 动态渲染图片区域 -->
                        <div class="title3">
                            <div class="img1" v-for="(img, imgIndex) in item.images" :key="imgIndex"
                                :style="{ backgroundImage: `url(${img.src})` }" :title="img.alt">
                            </div>
                        </div>
                    </div>
                    <div class="content2">
                        <div class="content2-1" :style="getBgColorMiddle(index)"
                            v-for="(item, index) in middleRightBlocks" :key="index">
                            <!-- 标题 -->
                            <div class="title" :style="index === 1
                                ? {
                                    top: '-5px'
                                }
                                : {
                                    top: '-10px'
                                }">{{ item.title }}</div>
                            <!-- 描述文本 -->
                            <div class="title2" :style="index === 1
                                ? {
                                    top: '-5px',
                                    left: '10px',
                                }
                                : {
                                }" v-html="item.description"></div>
                            <!-- 动态渲染标准列表（多列） -->
                            <div class="standards-list" :style="index === 1
                                ? {
                                    left: '-220px',
                                    top: '-30px',
                                }
                                : {
                                }">>
                                <!-- 遍历列数据 -->
                                <div class="standards-col" v-for="(col, colIndex) in item.standards" :key="colIndex">
                                    <!-- 遍历列中的每个标准项 -->
                                    <div class="standard-item" :style="index === 1
                                        ? {
                                            width: '210px',
                                        }
                                        : {

                                        }" v-for="(standard, stdIndex) in col" :key="stdIndex">
                                        <!-- 第一列第一项显示“相关标准：”+箭头 -->
                                        <template v-if="colIndex === 0 && stdIndex === 0">
                                            <span style="font-family: '微软雅黑粗体';">{{ standard }}</span>
                                            <div class="img1"></div> <!-- 箭头图标 -->
                                        </template>
                                        <!-- 其他标准项直接显示文本 -->
                                        <template v-else>
                                            {{ standard }}
                                        </template>
                                    </div>
                                </div>
                            </div>
                            <!-- 动态渲染图片区域 -->
                            <div class="title3" :style="index === 1
                                ? {
                                    display: 'flex',
                                }
                                : {
                                    display: 'contents'
                                }">
                                <div class="img1" v-for="(img, imgIndex) in item.images" :key="imgIndex" :style="index === 0
                                    ? {
                                        position: 'relative',
                                        top: '-50px',
                                        left: '50px',
                                        width: '500px',
                                        height: '370px',
                                        backgroundImage: `url(${img.src})`
                                    }
                                    : {
                                        backgroundImage: `url(${img.src})`
                                    }" :title="img.alt">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 右边内容 -->
            <div class="right">
                <div class="box">
                    <div class="headImg"></div>
                    <div class="title">被动安全领域</div>
                    <div class="content">
                        <div class="title">动态冲击试验</div>
                        <div class="contentTitle">
                            <span style="top: 80px;
    position: absolute;
    width: 23px;
    height: 23px;
    background: #49B8FF;
    border-radius: 5px;"></span>
                            <p><span
                                    style="margin-left: 40px;">动态冲击试验包括：行人保护试验、内部凸出物静态试验、防止转向管柱对驾驶员伤害试验及企业定制的其他冲击试验。</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="box2">
                    <!-- 遍历碰撞类型数据，动态生成每个content1 -->
                    <div class="content1" v-for="(item, index) in rightBlocks" :style="getBlockSize(index)"
                        :key="index">
                        <!-- 标题 -->
                        <div class="title">{{ item.title }}</div>
                        <!-- 描述文本 -->
                        <div class="title2" :style="getRightTitle2(index)" v-html="item.description"></div>
                        <!-- 动态渲染标准列表（多列） -->
                        <div class="standards-list" :style="getRightstandardsList(index)">
                            <!-- 遍历列数据 -->
                            <!-- 移除外层的v-for遍历列，直接渲染固定的两行结构 -->
                            <div class="standards-col">
                                <!-- 第一行：相关标准标签 + 箭头 + 第一行文本 -->
                                <div class="standard-standard">
                                    <span style="font-family: '微软雅黑粗体';">{{ item.standardLabel }}</span>
                                    <div class="img1"></div>
                                    <!-- <span class="standard-text">{{ item.standardLines.line1 }}</span> -->
                                </div>
                                <div class="standard-item" :style="index === 0
                                    ? {
                                        textAlign: 'left',
                                        width: '635px',
                                    }
                                    : {
                                    }" v-if="item.standardLines.line1">
                                    <span class="placeholder"></span>
                                    <span class="standard-text">{{ item.standardLines.line1 }}</span>
                                </div>
                            </div>
                        </div>
                        <!-- 动态渲染图片区域 -->
                        <div class="title3">
                            <div :style="getRightstandardsImgs(index, img)" class="img1"
                                v-for="(img, imgIndex) in item.images" :key="imgIndex" :title="img.alt">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box3">
                    <div class="content">
                        <div class="title">气囊试验</div>
                        <div class="contentTitle">
                            <span style="top: 48px;
    position: absolute;
    width: 23px;
    height: 23px;
    background: #49B8FF;
    border-radius: 5px;"></span>
                            <p><span
                                    style="margin-left: 40px;float: right;">气囊试验包括：安全气囊及子系统静态点爆试验、气囊误作用试验、整车及部件高低温性能验证（温度仓）、高低温性能验证（低温冷启动、高低温充电、隐藏式门把手冰冻试验、高温烘烤等）。</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="box4">
                    <div class="box4-1">
                        <div class="content">气囊点爆及子系统验证</div>
                        <div class="content2">
                            <div class="left">
                                <div class="title">气囊点爆</div>
                                <div class="title2">DAB、PAB、CAB、SAB、KAB 等）</div>
                                <div class="title3">
                                    <span>整车及部件</span><span
                                        style="font-family: '微软雅黑粗体';">高低温性能验证</span>（温度仓）；高低温性能验证（<span
                                        style="font-family: '微软雅黑粗体';">低温冷启动、高低温充电、隐藏式门把手冰冻试验、高温烘烤</span>等。
                                </div>
                                <div class="left2">
                                    <div class="title1">相关标准：</div>
                                    <div class="img"></div>
                                    <div class="title2">GB/T 19949.2</div>
                                </div>
                            </div>
                            <div class="right2">
                                <div class="img1"></div>
                            </div>
                        </div>
                    </div>
                    <div class="box4-1">
                        <div class="content">气囊误作用试验</div>
                        <div class="content2">
                            <div class="left">
                                <div class="title">气囊点爆</div>
                                <div class="title2">DAB、PAB、CAB、SAB、KAB 等）</div>
                                <div class="title3">
                                    <span>整车及部件</span><span
                                        style="font-family: '微软雅黑粗体';">静态误作用试验、路试误作用试验。</span>具备丰富的ACU标定试验经验，为主机厂提供ACU标定试验一站式服务。
                                </div>
                                <div class="left2">
                                    <div class="title1">相关标准：</div>
                                    <div class="img"></div>
                                    <div class="title2">GB/T 37474</div>
                                </div>
                            </div>
                            <div class="right2">
                                <div class="img2"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
//路由
import { useRouter } from 'vue-router'
const router = useRouter()
//跳转路由
const backHome = () => {
    router.push({ name: 'ningbo' })
}
//跳转路由
const goToService = (item) => {
    router.push({ name: item })
}
const getBgColorMiddle = (index) => {
    if (index === 0) {
        return {
        };
    } else {
        return {
            'backgroundImage': 'url("/imgs/ningbo/safe/组 7817.png")',
            'backgroundSize': '100% 100%',
            'backgroundRepeat': 'no-repeat',
            'backgroundPosition': 'center'
        };
    }
};
//右部数据
const getRightstandardsImgs = (index, img) => {
    if (index === 0) {
        return {
            backgroundImage: `url(${img.src})`,
            width: '298px',
            height: '246px'
        };
    } else if (index === 1) {
        return {
            width: '698px',
            height: '246px',
            backgroundImage: `url(${img.src})`,
        };
    }
    else if (index === 2) {
        return {
            width: '698px',
            height: '246px',
            backgroundImage: `url(${img.src})`,
        };
    }
    else if (index === 3) {
        return {
            top: '-60px',
            width: '360px',
            height: '246px',
            backgroundImage: `url(${img.src})`,
        };
    }
}
//右部数据
const getRightstandardsList = (index) => {
    if (index === 0) {
        return {
            top: '-20px',
            left: '-10px',
        };
    } else if (index === 1) {
        return {
            top: '0px',
            left: '-20px',
        };
    }
    else if (index === 2) {
        return {
            top: '0px',
            left: '-20px',
        };
    }
    else if (index === 3) {
        return {
            top: '0px',
            left: '-30px',
        };
    }
}
//右部数据
const getRightTitle2 = (index) => {
    if (index === 0) {
        return {
            top: '20px',
            left: '10px',
        };
    } else if (index === 1) {
        return {
            top: '35px',
            left: '40px',
        };
    }
    else if (index === 2) {
        return {
            top: '30px',
            left: '40px',
        };
    }
    else if (index === 3) {
        return {
            top: '30px',
            left: '40px'
        };
    }
}
const getBgColor = (index) => {
    if (index === 0) {
        return {
            'backgroundImage': 'url("/imgs/ningbo/safe/组 7816.png")',
            'backgroundSize': '100% 100%',  // 图片自适应容器
            'backgroundRepeat': 'no-repeat', // 不重复
            'backgroundPosition': 'center'   // 居中
        };
    } else {
        return {
            'backgroundImage': 'url("/imgs/ningbo/safe/组 7817.png")',
            'backgroundSize': '100% 100%',
            'backgroundRepeat': 'no-repeat',
            'backgroundPosition': 'center'
        };
    }
};
// 方法：根据索引返回每个区块的宽度样式（实现大小不一致）
const getBlockSize = (index) => {
    // 为四个区块分别设置不同宽度（可根据实际需求调整比例）
    const widths = ['964px', '738px', '738px', '384px']; // 总和接近100%，留间隙
    return {
        width: widths[index],
        minWidth: '200px' // 最小宽度，避免过窄
    };
};
//right（行人保护、内部凸出物、转管强度、企业定制）
const rightBlocks = ref([
    {
        title: '行人保护',
        description: '<span style="font-family: \'微软雅黑粗体\';">头型冲击、上腿型冲击、下腿型冲击</span>等。',
        // 相关标准：标签 + 两行文本（直接存储具体内容）
        standardLabel: '相关标准：',
        standardLines: {
            line1: 'GB 24550, ECE R127, (EC)78/2009,2003/102/EC, KMVSS102.2, GTR 9',
            line2: ''
        },
        // 3张图片
        images: [
            { src: '/imgs/ningbo/safe/image179.GIF', alt: '头型冲击测试' },
            { src: '/imgs/ningbo/safe/image178.GIF', alt: '上腿型冲击测试' },
            { src: '/imgs/ningbo/safe/image180.GIF', alt: '下腿型冲击测试' }
        ]
    },
    {
        title: '内部凸出物',
        description: '<span style="font-family: \'微软雅黑粗体\';">遮阳板、仪表板冲击、扶手箱冲击、座椅冲击</span>等。',
        standardLabel: '相关标准：',
        standardLines: {
            line1: 'GB 24550, ECE R127, (EC)78/2009 2003/102/EC, KMVSS102.2, GTR 9',
            line2: ''
        },
        // 2张图片（补充第二张图，与设计图一致）
        images: [
            { src: '/imgs/ningbo/safe/图片68.png', alt: '仪表板冲击测试' },
            { src: '/imgs/ningbo/safe/图片69.png', alt: '座椅冲击测试' } // 补充第二张
        ]
    },
    {
        title: '转管强度',
        description: '<span style="font-family: \'微软雅黑粗体\';">头型试验、胸块试验</span>。',
        standardLabel: '相关标准：',
        standardLines: {
            line1: 'GB 11557, ECE R12, FMVSS 203 FMVSS 204, ADR 10, SABS 1440, SANS 20012',
            line2: ''
        },
        // 2张图片（补充第二张图，与设计图一致）
        images: [
            { src: '/imgs/ningbo/safe/图片70.png', alt: '头型试验' },
            { src: '/imgs/ningbo/safe/图片72.png', alt: '胸块试验' } // 补充第二张
        ]
    },
    {
        title: '企业定制',
        description: '内护板、B柱冲击等。',
        standardLabel: '相关标准：',
        standardLines: {
            line1: '企业标准' // 仅一行
        },
        // 1张图片
        images: [
            { src: '/imgs/ningbo/safe/图片71.png', alt: 'B柱冲击测试' }
        ]
    }
]);
//中间右部数据
const middleRightBlocks = ref([
    {
        title: '气瓶安装强度',
        description: '乘用车<span style="font-family: \'微软雅黑粗体\';">气瓶安装强度</span>试验。',
        // 标准转为二维数组（单列）
        standards: [
            ['相关标准：', 'GB 19239', 'ECE R110', 'SANS 20067', 'SANS 20110', '(SABS ECE R110)']
        ],
        images: [
            {
                src: '/imgs/ningbo/safe/image169.GIF',
                alt: '气瓶安装强度测试场景'
            }
        ]
    },
    {
        title: '其他',
        description: '<span style="font-family: \'微软雅黑粗体\';">行李架动态冲击、手机支架动态冲击、带AEB制动的乘员保护试验</span>',
        // 标准转为二维数组（单列）
        standards: [
            ['相关标准：', ''],
            ['企业标准', '']
        ],
        images: [
            {
                src: '/imgs/ningbo/safe/image165.GIF',
                alt: '行李架动态冲击测试'
            },
            {
                src: '/imgs/ningbo/safe/image166.GIF',
                alt: '手机支架动态冲击测试'
            },
            {
                src: '/imgs/ningbo/safe/image164.GIF',
                alt: '带AEB制动的乘员保护试验'
            }
        ]
    }
]);
//中间 动态数据：包含三个试验区块的信息
const middleBlocks = ref([
    {
        title: '座椅动态',
        description: '汽车<span style="font-family: \'微软雅黑粗体\';">座椅强度</span>碰撞、<span style="font-family: \'微软雅黑粗体\';">行李箱冲击、客车座椅、校车座椅</span>等动态测试能力。',
        // 相关标准：二维数组（左列 + 右列）
        standards: [
            ['相关标准：', 'GB 15083', 'GB 24406', 'GB 13057', 'QC/T 740', 'QC/T 633', 'ECE R126', 'ECE R17'],
            ['', 'ECE R80', '74/08/EEC', 'ADR 3/04', 'ADR 68/01', 'FMVSS 207', 'KMVSS 97', 'KMVSS116']
        ],
        images: [
            { src: '/imgs/ningbo/safe/image36.GIF', alt: '正面碰撞测试图1' },
        ]
    },
    {
        title: '门锁动态',
        description: '<span style="font-family: \'微软雅黑粗体\';">门锁耐惯性力性能</span>试验。',
        standards: [
            ['相关标准：', 'GB 15086', 'ECE R11', 'ADR 2', 'GSO 419', 'GSO 420', 'KMVSS 104', 'KMVSS116', 'SANS 1443']
        ],
        images: [
            { src: '/imgs/ningbo/safe/image167.GIF', alt: '正面碰撞测试图1' },
        ]
    },
    {
        title: '内凸试验',
        description: '乘用车<span style="font-family: \'微软雅黑粗体\';">内部凸出物</span>试验。',
        standards: [
            ['相关标准：', 'GB 11552-2009', 'QC/T 804-2014', 'ECE R21', '74/60/EEC', 'FMVSS 201', 'ADR 11', 'ADR 21', 'SABS 1047'],
        ],
        images: [
            { src: '/imgs/ningbo/safe/image168.GIF', alt: '正面碰撞测试图1' },
        ]
    }
]);
// 动态数据：包含后碰撞和定制试验的完整信息
const collisionList2 = ref([
    {
        title: '后碰撞',
        description: '100%后碰撞、70%重叠后碰撞、RCAR后碰撞。',
        // 标准列表：二维数组（按列划分）
        standards: [
            ['相关标准：', 'GB 20072', 'ECE R32'], // 第一列（含"相关标准："标题）
            ['ECE R34', 'ECE R153', 'GSO 37'],      // 第二列
            ['FMVSS 301', 'KMVSS91', 'KMVSS91.4']   // 第三列
        ],
        // 图片路径数组（2张图）
        images: [
            { src: '/imgs/ningbo/safe/image159.GIF', alt: '正面碰撞测试图1' },
            { src: '/imgs/ningbo/safe/image163.GIF', alt: '正面碰撞测试图3' }
        ]
    },
    {
        title: '定制试验',
        description: '<span style="font-family: \'微软雅黑粗体\';">吸能盒</span>测试、<span style="font-family: \'微软雅黑粗体\';">前纵梁</span>测试、<span style="font-family: \'微软雅黑粗体\';">前后保险杠</span>测试、<span style="font-family: \'微软雅黑粗体\';">发动机罩盖</span>弹起、<span style="font-family: \'微软雅黑粗体\';">发动机动态冲击</span>等。',
        // 标准列表：一维数组（单列）
        standards: [
            ['相关标准：', ''],
            ['企业定制标准', '']
        ],
        // 图片路径数组（3张图）
        images: [
            { src: '/imgs/ningbo/safe/image161.GIF', alt: '正面碰撞测试图1' },
            { src: '/imgs/ningbo/safe/image158.GIF', alt: '正面碰撞测试图2' },
            { src: '/imgs/ningbo/safe/image157.GIF', alt: '正面碰撞测试图3' }
        ]
    }
]);
// 动态数据：包含所有碰撞类型的信息
const collisionList = ref([
    {
        title: '正面碰撞',
        title2: '100%正面碰撞、40%正面偏置碰撞、正面30°角碰撞、正面钻入碰撞、正面柱碰撞、RCAR10°角正面碰撞、25%正面偏置碰撞、客车正碰、货车正碰。',
        // 标准列表：二维数组（第一维是列，第二维是列中的标准项）
        standards: [
            [
                '相关标准：', // 第一列第一项特殊文本
                'GB 11551',
                'GB/T 31498',
                'GB 11557',
                'GB/T 20913',
                'JT/T 1369',
                'ECE R94',
                'ECE R137',
                'ECE R12'
            ],
            [
                '96/79/EC',
                'FMVSS 208',
                'FMVSS 203',
                'FMVSS 204',
                'FMVSS 305',
                'ADR 69',
                'ADR 73',
                'ADR 10',
                'KMVSS102'
            ],
            [
                'KMVSS91.3',
                'KMVSS102.3',
                'KMVSS116',
                'GSO 2698',
                'GSO 36',
                'SASO 03-04',
                'SABS 1440',
                'SANS 20012'
            ]
        ],
        // 图片数据：包含图片路径和描述
        images: [
            { src: '/imgs/ningbo/safe/image154.GIF', alt: '正面碰撞测试图1' },
            { src: '/imgs/ningbo/safe/image153.GIF', alt: '正面碰撞测试图2' },
            { src: '/imgs/ningbo/safe/image162.GIF', alt: '正面碰撞测试图3' }
        ]
    },
    {
        title: '侧面碰撞',
        title2: '侧面碰撞（GB侧碰、C-NCAP侧碰、FMVSS侧碰）、侧面柱碰撞、客车侧碰。',
        standards: [
            [
                '相关标准：', // 第一列第一项特殊文本
                'GB 20071',
                'GB/T 37337',
                'GB 38032',
                'GB 39732',
                'GB/T 26780',
                'ECE R95',
                'ECE R135'
            ],
            [
                'ECE R160',
                'FMVSS 214',
                'GSO 1707',
                'GSO 38',
                'GSO 1708',
                'KMVSS102.4',
                'KMVSS116'
            ]
        ],
        images: [
            { src: '/imgs/ningbo/safe/image156.GIF', alt: '正面碰撞测试图1' },
            { src: '/imgs/ningbo/safe/image155.GIF', alt: '正面碰撞测试图2' },
            { src: '/imgs/ningbo/safe/image160.GIF', alt: '正面碰撞测试图3' }
        ]
    }
]);
</script>
<style scoped>
/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
    width: 6240px;
    /* 新目标宽度 */
    height: 1456px;
    /* 新目标高度 */
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
    width: 9600px;
    /* 原始宽度不变 */
    height: 2240px;
    /* 原始高度不变 */
    transform: scale(0.65);
    /* 新缩放比：6240/9600=0.65，1456/2240=0.65（宽高比完全一致） */
    transform-origin: 0 0;
    /* 保持左上角为缩放原点，避免位置偏移 */
    position: relative;
}

.headTitle {
    text-align: center;
    position: relative;
    top: -24px;
    font-size: 130px;
    /* left: 40.5%; */
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.left1 {
    z-index: 999;
    cursor: pointer;
    top: 45%;
    left: 10px;
    position: absolute;
    width: 94px;
    height: 258px;
    background-image: url("/imgs/home/left1.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.right1 {
    z-index: 999;
    cursor: pointer;
    position: absolute;
    top: 45%;
    right: 10px;
    width: 94px;
    height: 258px;
    background-image: url("/imgs/home/right1.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.headButton {
    cursor: pointer;
    display: flex;
    float: inline-end;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 78px;
    height: 78px;
    background-image: url("/imgs/ningbo/cancel.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.left {
    display: flex;

    .box {
        margin-left: 73px;
        display: flex;
        width: 1372px;
        height: 168px;
        background-image: url("/imgs/ningbo/t(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .headImg {
            margin-left: 220px;
            margin-top: 41px;
            width: 53px;
            height: 58px;
            background-image: url("/imgs/ningbo/菱形 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .title {
            margin-left: 30px;
            margin-top: 22px;
            height: 49px;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            font-size: 57px;
            color: #FFFFFF;
        }

        .content {
            position: absolute;
            top: 402px;
            left: 160px;
            width: 2947px;
            height: 375px;
            display: flex;
            align-items: center;
            background-image: url("/imgs/ningbo/safe/组 7814.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .title {
                width: 300px;
                margin-left: 200px;
                font-family: "微软雅黑粗体";
                font-size: 44px;
                color: #FFFFFF;
                line-height: 44px;
                background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .contentTitle {
                padding: 80px;
                font-family: "微软雅黑常规";
                font-size: 38px;
                color: #FFFFFF;
            }
        }
    }

    .box2 {
        display: flex;
        width: 2925px;
        top: 750px;
        height: 1400px;
        position: absolute;
        left: 180px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;

        .content1 {
            justify-content: space-evenly;
            flex-wrap: wrap;
            align-items: center;
            display: flex;
            width: 957px;
            height: 1243px;
            background-image: url("/imgs/ningbo/safe/组 7815.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .img {
                width: 632px;
                height: 360px;
            }

            .title {
                position: relative;
                text-align: center;
                top: -15px;
                width: 527px;
                font-family: "微软雅黑粗体";
                font-weight: 400;
                font-size: 42px;
                color: #FFFFFF;
            }

            .title2 {
                position: relative;
                top: -60px;
                width: 841px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 33px;
                color: #FFFFFF;
            }

            .title3 {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 8px;
                width: 917px;


                .img1 {
                    border-radius: 10px;
                    height: 236px;
                    width: 300px;
                    background-image: url("/imgs/ningbo/safe/image154.GIF");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }

                .img2 {
                    height: 236px;
                    width: 300px;
                    background-image: url("/imgs/ningbo/safe/image153.GIF");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }

                .img3 {
                    height: 236px;
                    width: 300px;
                    background-image: url("/imgs/ningbo/safe/image162.GIF");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            }

            /* 三列标准列表布局 */
            .standards-list {
                display: flex;
                gap: 25px;


                /* 列之间的间距 */
                .standards-col {
                    flex: 1;
                    /* 三列平均分配宽度 */
                    /* display: flex; */
                    flex-direction: column;
                    gap: 12px;
                    /* 标准项之间的间距 */
                }

                .standard-item {
                    position: relative;
                    padding-left: 12px;
                    width: 250px;
                    /* 给项目符号留空间 */
                    font-family: "微软雅黑常规";
                    font-weight: 400;
                    font-size: 33px;
                    color: #3CE1FF;
                    line-height: 61px;
                    font-style: italic;
                    text-decoration-line: underline;

                    .img1 {
                        width: 35px;
                        height: 32px;
                        background-image: url("/imgs/ningbo/safe/组 7811.png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        position: absolute;
                        left: 187px;
                        top: 13px;
                    }
                }
            }

            .img1 {

                width: 632px;
                height: 360px;
                background-image: url("/imgs/ningbo/newEnergy/图片1.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }

        .content2 {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            gap: 35px;

            .content2-1 {
                justify-content: space-evenly;
                flex-wrap: wrap;
                align-items: center;
                display: flex;
                width: 957px;
                height: 600px;
                background-image: url("/imgs/ningbo/safe/组 7816.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;

                .img {
                    width: 632px;
                    height: 360px;
                }

                .title {
                    position: relative;
                    text-align: center;
                    top: -10px;
                    width: 527px;
                    font-family: "微软雅黑粗体";
                    font-weight: 400;
                    font-size: 42px;
                    color: #FFFFFF;
                }

                .title2 {
                    position: relative;
                    /* top: -22px; */
                    text-align: center;
                    width: 841px;
                    font-family: "微软雅黑常规";
                    font-weight: 400;
                    font-size: 33px;
                    color: #FFFFFF;
                }

                .title3 {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 20px;
                    width: 957px;

                    .img1 {

                        height: 236px;
                        width: 292px;
                        background-image: url("/imgs/ningbo/safe/image154.GIF");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .img2 {
                        height: 236px;
                        width: 292px;
                        background-image: url("/imgs/ningbo/safe/image153.GIF");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .img3 {
                        height: 236px;
                        width: 292px;
                        background-image: url("/imgs/ningbo/safe/image162.GIF");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }

                /* 三列标准列表布局 */
                .standards-list {
                    display: flex;
                    gap: 25px;
                    position: relative;

                    /* 列之间的间距 */
                    .standards-col {
                        flex: 1;
                        /* 三列平均分配宽度 */
                        display: flex;
                        flex-direction: column;
                        gap: 12px;
                        /* 标准项之间的间距 */
                    }

                    .standard-item {
                        position: relative;
                        padding-left: 12px;
                        line-height: 30px;
                        width: 250px;
                        /* 给项目符号留空间 */
                        font-family: "微软雅黑常规";
                        font-weight: 400;
                        font-size: 33px;
                        color: #3CE1FF;
                        font-style: italic;
                        text-decoration-line: underline;

                        .img1 {
                            width: 35px;
                            height: 32px;
                            background-image: url("/imgs/ningbo/safe/组 7811.png");
                            background-position: left;
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            position: absolute;
                            left: 187px;
                            top: 0px;
                        }
                    }
                }

                .img1 {

                    width: 632px;
                    height: 360px;
                    background-image: url("/imgs/ningbo/newEnergy/图片1.png");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            }

        }
    }
}

.middle {
    display: flex;
    position: absolute;
    left: 3109px;
    top: 202px;

    .box {
        margin-left: 73px;
        display: flex;
        width: 1372px;
        height: 168px;
        background-image: url("/imgs/ningbo/t(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .headImg {
            margin-left: 220px;
            margin-top: 41px;
            width: 53px;
            height: 58px;
            background-image: url("/imgs/ningbo/菱形 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .title {
            margin-left: 30px;
            margin-top: 22px;
            height: 49px;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            font-size: 57px;
            color: #FFFFFF;
        }

        .content {
            display: flex;
            position: absolute;
            top: 202px;
            left: 160px;
            width: 3014px;
            height: 274px;
            background-image: url("/imgs/ningbo/safe/矩形 933 拷贝 3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .contentTitle {
                display: flex;
                align-content: center;
                flex-wrap: wrap;
                width: 95%;
                margin-left: 100px;
                font-family: "微软雅黑常规";
                font-size: 40px;
                color: #FFFFFF;
                line-height: 67px;

            }
        }
    }

    .box2 {
        display: flex;
        align-items: center;
        position: absolute;
        left: 197px;
        top: 475px;
        width: 2947px;
        height: 199px;
        background-image: url("/imgs/ningbo/safe/组 7818.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title {
            width: 300px;
            margin-left: 200px;
            font-family: "微软雅黑常规";
            ;
            font-weight: bold;
            font-size: 44px;
            color: #FFFFFF;
            line-height: 44px;
            background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .title2 {
            width: 79%;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 38px;
            color: #FFFFFF;
        }
    }

    .box3 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 183px;
        top: 549px;
        display: flex;
        width: 2990px;
        height: 1495px;
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .content1 {
            justify-content: space-evenly;
            flex-wrap: wrap;
            align-items: center;
            display: flex;
            width: 630px;
            height: 1183px;
            background-image: url("/imgs/ningbo/safe/矩形 937 拷贝(3).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .img {
                width: 632px;
                height: 360px;
            }

            .title {
                position: relative;
                text-align: center;
                top: -10px;
                width: 527px;
                font-family: "微软雅黑粗体";
                font-weight: 400;
                font-size: 42px;
                color: #FFFFFF;
            }

            .title2 {
                position: relative;
                top: -40px;
                text-align: center;
                padding: 50px;
                width: 841px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 33px;
                color: #FFFFFF;
            }

            .title3 {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 8px;
                width: 917px;

                .img1 {
                    height: 285px;
                    width: 589px;
                    background-image: url("/imgs/ningbo/safe/image154.GIF");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }

                .img2 {
                    height: 236px;
                    width: 300px;
                    background-image: url("/imgs/ningbo/safe/image153.GIF");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }

                .img3 {
                    height: 236px;
                    width: 300px;
                    background-image: url("/imgs/ningbo/safe/image162.GIF");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            }

            /* 三列标准列表布局 */
            .standards-list {
                display: flex;
                gap: 25px;
                position: relative;
                top: -74px;

                /* 列之间的间距 */
                .standards-col {
                    flex: 1;
                    /* 三列平均分配宽度 */
                    /* display: flex; */
                    flex-direction: column;
                    gap: 12px;
                    /* 标准项之间的间距 */
                }

                .standard-item {
                    position: relative;
                    padding-left: 12px;
                    /* 给项目符号留空间 */
                    font-family: "微软雅黑常规";
                    font-weight: 400;
                    font-size: 33px;
                    color: #3CE1FF;
                    line-height: 61px;
                    font-style: italic;
                    text-decoration-line: underline;

                    .img1 {
                        width: 35px;
                        height: 32px;
                        background-image: url("/imgs/ningbo/safe/组 7811.png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        position: absolute;
                        left: 176px;
                        top: 14px;
                    }
                }
            }

            .img1 {
                width: 632px;
                height: 360px;
                background-image: url("/imgs/ningbo/newEnergy/图片1.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }

        .content2 {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            gap: 30px;

            .content2-1 {
                justify-content: space-evenly;
                flex-wrap: wrap;
                align-items: center;
                display: flex;
                width: 957px;
                height: 574px;
                background-image: url("/imgs/ningbo/safe/矩形 937 拷贝(4).png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;

                .img {
                    width: 632px;
                    height: 360px;
                }

                .title {
                    line-height: 70px;
                    position: relative;
                    text-align: center;
                    top: -15px;
                    width: 527px;
                    font-family: "微软雅黑粗体";
                    font-weight: 400;
                    font-size: 42px;
                    color: #FFFFFF;
                }

                .title2 {
                    position: relative;
                    left: 30px;
                    top: 20px;
                    text-align: left;
                    width: 841px;
                    font-family: "微软雅黑常规";
                    font-weight: 400;
                    font-size: 33px;
                    color: #FFFFFF;
                }

                .title3 {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: row;
                    flex-wrap: wrap;
                    /* gap: 20px; */
                    width: 957px;
                    position: relative;

                    .img1 {
                        height: 236px;
                        width: 300px;
                        background-image: url("/imgs/ningbo/safe/image154.GIF");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .img2 {
                        height: 236px;
                        width: 300px;
                        background-image: url("/imgs/ningbo/safe/image153.GIF");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .img3 {
                        height: 236px;
                        width: 300px;
                        background-image: url("/imgs/ningbo/safe/image162.GIF");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }

                /* 三列标准列表布局 */
                .standards-list {
                    display: flex;
                    gap: 25px;
                    position: relative;
                    top: -20px;

                    /* 列之间的间距 */
                    .standards-col {
                        flex: 1;
                        /* 三列平均分配宽度 */
                        /* display: flex; */
                        flex-direction: column;
                        gap: 12px;
                        /* 标准项之间的间距 */
                    }

                    .standard-item {
                        position: relative;
                        padding-left: 12px;
                        /* width: 250px; */
                        /* 给项目符号留空间 */
                        font-family: "微软雅黑常规";
                        font-weight: 400;
                        font-size: 33px;
                        color: #3CE1FF;
                        font-style: italic;
                        text-decoration-line: underline;

                        .img1 {
                            width: 35px;
                            height: 32px;
                            background-image: url("/imgs/ningbo/safe/组 7811.png");
                            background-position: left;
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            position: absolute;
                            left: 180px;
                            top: 9px;
                        }
                    }
                }

                .img1 {
                    width: 632px;
                    height: 360px;
                    background-image: url("/imgs/ningbo/newEnergy/图片1.png");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            }

        }
    }
}

.right {
    display: flex;
    position: absolute;
    flex-direction: column;
    left: 6250px;

    top: 200px;
    display: flex;

    .box {
        margin-left: 73px;
        display: flex;
        width: 1372px;
        height: 168px;
        background-image: url("/imgs/ningbo/t(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .headImg {
            margin-left: 220px;
            margin-top: 41px;
            width: 53px;
            height: 58px;
            background-image: url("/imgs/ningbo/菱形 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .title {
            margin-left: 30px;
            margin-top: 22px;
            height: 49px;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            font-size: 57px;
            color: #FFFFFF;
        }

        .content {
            position: absolute;
            top: 235px;
            left: 220px;
            width: 2927px;
            height: 180px;
            display: flex;
            align-items: center;
            background-image: url("/imgs/ningbo/safe/组 7819.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .title {
                width: 300px;
                margin-left: 200px;
                font-family: "微软雅黑粗体";
                font-size: 44px;
                color: #FFFFFF;
                line-height: 44px;
                background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .contentTitle {
                padding: 80px;
                font-family: "微软雅黑常规";
                font-size: 38px;
                color: #FFFFFF;
            }
        }
    }

    .box2 {
        display: flex;
        width: 2927px;
        top: 450px;
        height: 623px;
        position: absolute;
        left: 220px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;

        .content1 {
            justify-content: space-evenly;
            flex-wrap: wrap;
            align-items: center;
            display: flex;
            width: 964px;
            height: 623px;
            background-image: url("/imgs/ningbo/safe/矩形 937 拷贝(1).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .img {
                width: 632px;
                height: 360px;
            }

            .title {
                position: relative;
                text-align: center;
                /* top: -45px; */
                width: 527px;
                font-family: "微软雅黑粗体";
                font-weight: 400;
                font-size: 42px;
                color: #FFFFFF;
            }

            .title2 {
                position: relative;
                top: 10px;
                align-items: center;
                text-align: left;
                width: 841px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 29px;
                color: #FFFFFF;
            }

            .title3 {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 8px;
                width: 917px;
                position: relative;
                left: -156px;
                top: 45px;

                .img1 {

                    height: 236px;
                    width: 300px;
                    background-image: url("/imgs/ningbo/safe/image154.GIF");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }

                .img2 {
                    height: 236px;
                    width: 300px;
                    background-image: url("/imgs/ningbo/safe/image153.GIF");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }

                .img3 {
                    height: 236px;
                    width: 300px;
                    background-image: url("/imgs/ningbo/safe/image162.GIF");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            }

            /* 三列标准列表布局 */
            .standards-list {
                display: flex;
                gap: 25px;
                padding: 40px;
                float: left;
                position: relative;
                left: -60px;

                /* 列之间的间距 */
                .standards-col {
                    padding: 20px;
                    flex: 1;
                    /* 三列平均分配宽度 */
                    display: flex;
                    flex-direction: row;
                    gap: 12px;
                    /* 标准项之间的间距 */
                }

                .standard-standard {
                    position: relative;
                    width: 180px;
                    /* 给项目符号留空间 */
                    font-family: "微软雅黑常规";
                    font-weight: 400;
                    font-size: 33px;
                    color: #3CE1FF;
                    line-height: 61px;
                    font-style: italic;
                }

                .standard-item {
                    position: relative;
                    /* padding-left: 12px; */
                    width: 437px;
                    /* 给项目符号留空间 */
                    font-family: "微软雅黑常规";
                    font-weight: 400;
                    font-size: 28px;
                    color: #3CE1FF;
                    line-height: 40px;
                    font-style: italic;
                    text-decoration-line: underline;

                    .img1 {
                        width: 35px;
                        height: 32px;
                        background-image: url("/imgs/ningbo/safe/组 7811.png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        position: absolute;
                        left: 187px;
                        top: 20px;
                    }

                    .standard-text {
                        /* margin-top: 0px; */
                        /* position: relative; */
                        top: 8px;
                    }
                }
            }

            .img1 {
                position: relative;
                left: 156px;
                top: -45px;
                width: 35px;
                height: 32px;
                background-image: url("/imgs/ningbo/safe/组 7811.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }

        .content2 {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            gap: 30px;

            .content2-1 {
                justify-content: space-evenly;
                flex-wrap: wrap;
                align-items: center;
                display: flex;
                width: 957px;
                height: 600px;
                background-image: url("/imgs/ningbo/safe/矩形 937 拷贝.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;

                .img {
                    width: 632px;
                    height: 360px;
                }

                .title {
                    position: relative;
                    text-align: center;
                    /* top: -45px; */
                    width: 527px;
                    font-family: "微软雅黑粗体";
                    font-weight: 400;
                    font-size: 42px;
                    color: #FFFFFF;
                }

                .title2 {
                    text-align: center;
                    width: 841px;
                    font-family: "微软雅黑常规";
                    font-weight: 400;
                    font-size: 33px;
                    color: #FFFFFF;
                }

                .title3 {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 20px;
                    width: 957px;

                    .img1 {
                        height: 236px;
                        width: 300px;
                        background-image: url("/imgs/ningbo/safe/image154.GIF");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .img2 {
                        height: 236px;
                        width: 300px;
                        background-image: url("/imgs/ningbo/safe/image153.GIF");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .img3 {
                        height: 236px;
                        width: 300px;
                        background-image: url("/imgs/ningbo/safe/image162.GIF");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }

                /* 三列标准列表布局 */
                .standards-list {
                    display: flex;
                    gap: 25px;

                    /* 列之间的间距 */
                    .standards-col {
                        flex: 1;
                        /* 三列平均分配宽度 */
                        display: flex;
                        flex-direction: column;
                        gap: 12px;
                        /* 标准项之间的间距 */
                    }

                    .standard-item {
                        position: relative;
                        padding-left: 12px;
                        width: 210px;
                        /* 给项目符号留空间 */
                        font-family: "微软雅黑常规";
                        font-weight: 400;
                        font-size: 33px;
                        color: #3CE1FF;
                        font-style: italic;
                        text-decoration-line: underline;

                        .img1 {
                            width: 35px;
                            height: 32px;
                            background-image: url("/imgs/ningbo/safe/组 7811.png");
                            background-position: left;
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            position: absolute;
                            left: 187px;
                            top: 20px;
                        }
                    }
                }

                .img1 {
                    width: 632px;
                    height: 360px;
                    background-image: url("/imgs/ningbo/newEnergy/图片1.png");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            }
        }
    }

    .box3 {
        display: flex;
        width: 957px;
        height: 600px;
        position: absolute;
        top: 870px;

        .title {
            margin-left: 30px;
            margin-top: 22px;
            height: 49px;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            font-size: 57px;
            color: #FFFFFF;
        }

        .content {
            position: absolute;
            top: 235px;
            left: 220px;
            width: 2927px;
            height: 180px;
            display: flex;
            align-items: center;
            background-image: url("/imgs/ningbo/safe/组 7820.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .title {
                width: 300px;
                margin-left: 200px;
                font-family: "微软雅黑粗体";
                font-size: 44px;
                color: #FFFFFF;
                line-height: 44px;
                background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .contentTitle {
                padding: 80px;
                font-family: "微软雅黑常规";
                font-size: 38px;
                color: #FFFFFF;
            }
        }
    }

    .box4 {
        display: flex;
        width: 2927px;
        height: 546px;
        position: absolute;
        top: 1320px;
        left: 220px;
        gap: 30px;
        justify-content: center;
        align-items: center;

        .box4-1 {
            justify-content: space-around;
            flex-direction: column;
            width: 1520px;
            height: 546px;
            display: flex;
            align-items: center;
            background-image: url("/imgs/ningbo/safe/组 7822.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .content {
                position: relative;
                top: -40px;
                font-family: "微软雅黑粗体";
                font-size: 42px;
                color: #FFFFFF;
            }

            .content2 {
                position: relative;
                top: -40px;
                display: flex;
                justify-content: center;
                align-content: center;

                .left {
                    display: flex;
                    flex-direction: column;
                    width: 580px;

                    .title {
                        font-family: "微软雅黑粗体";
                        font-size: 31px;
                        color: #FFFFFF;
                    }

                    .title2 {
                        font-family: "微软雅黑常规";
                        font-size: 31px;
                        color: #FFFFFF;
                    }

                    .title3 {
                        font-family: "微软雅黑常规";
                        font-size: 31px;
                        font-weight: 400;
                        color: #FFFFFF;
                    }

                    .left2 {
                        display: flex;
                        flex-direction: row;

                        .title1 {
                            font-family: "微软雅黑粗体";
                            font-size: 33px;
                            color: #62F9FF;
                            font-style: italic;
                        }

                        .img {
                            position: relative;
                            top: 10px;
                            left: -4px;
                            width: 35px;
                            height: 32px;
                            background-image: url("/imgs/ningbo/safe/组 7811.png");
                            background-position: left;
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }

                        .title2 {
                            font-family: "微软雅黑常规";
                            font-weight: 400;
                            font-size: 33px;
                            color: #3CE1FF;
                            line-height: 50px;
                            font-style: italic;
                            text-decoration-line: underline;
                        }
                    }
                }

                .right2 {
                    display: flex;
                    flex-direction: row;

                    .img1 {
                        width: 763px;
                        height: 300px;
                        background-image: url("/imgs/ningbo/safe/图片73.png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .img2 {
                        width: 763px;
                        height: 300px;
                        background-image: url("/imgs/ningbo/safe/图片75.png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }
            }

        }

        .box4-2 {
            /* position: absolute; */
            top: 235px;
            left: 220px;
            width: 1520px;
            height: 546px;
            display: flex;
            align-items: center;
            background-image: url("/imgs/ningbo/safe/组 7822.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .title {
                width: 300px;
                margin-left: 200px;
                font-family: "微软雅黑粗体";
                font-size: 44px;
                color: #FFFFFF;
                line-height: 44px;
                background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .contentTitle {
                padding: 80px;
                font-family: "微软雅黑常规";
                font-size: 38px;
                color: #FFFFFF;
            }
        }
    }
}
</style>